<template>
  <div id="Playlist" @click="isShow_operateBox=false">
    <div class="list-scroll">
      <transition-group class="row" style="margin:0;" name="list" tag="div">
        <div
          class="box col-xs-4 col-sm-3 col-md-2 col-lg-2"
          v-for="(item,prop) in player.songlistAll"
          :key="prop"
        >
          <div class="box-wrap" :class="{active:ShowPlayIco(prop)}" v-longtap="longtapBox">
            <span
              class="btn-delete"
              v-if="isShow_operateBox&&isRemove(prop)"
              @click.stop="deleteSonglist(prop)"
            />
            <div class="box-img" @click="skipSonglist(prop)">
              <img
                :src="item.imgUrl"
                onerror="this.src=''"
              />
            </div>
          </div>
          <p @click="skipSonglist(prop)">
            <span>{{item.title}}</span>
          </p>
        </div>
      </transition-group>
      <div class="btn-addList">
        <ul>
          <li>
            我的歌单
            <span @click="isShow_syncList=true">[点击同步]</span>
          </li>
          <li>
            <span @click="isShow_reset=true">重置所有数据(清空缓存)</span>
          </li>
        </ul>
      </div>
    </div>
    <SyncSonglist v-model="isShow_syncList" />
    <Alert
      v-model="showConfirm"
      @AlertResult="removeSonglist"
      title="移除歌单"
      content="  歌单移除后列表上的歌曲不可恢复哦"
      :confirmBtn="true"
      :cancelBtn="true"
      :data="removeSonglist_key"
    />
    <Alert
      v-model="isShow_reset"
      @AlertResult="resetAllData"
      title="重置所有数据"
      content="  这是个谨慎的操作，你确定要这么做吗？"
      :confirmBtn="true"
      :cancelBtn="true"
      cancelText="不了"
      confirmText="是的(重置)"
    />
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import SyncSonglist from "./../components/SyncSonglist.vue";
import Alert from "./../components/Popup/Prompt/Alert.vue";

export default {
  name: "Playlist",
  data() {
    return {
      isShow_syncList: false,
      isShow_operateBox: false,
      removeSonglist_key: "",
      showConfirm: false,
      isShow_reset: false
    };
  },
  computed: {
    ...mapState(["player"])
  },
  methods: {
    ...mapMutations(["delSonglist", "addSonglistItem"]),
    resetAllData(result) {
      if (!result.execute) return;
      // 重置所有数据
      localStorage.clear();
      this.$router.go(0);
    },
    longtapBox(e) {
      e.preventDefault();
      this.isShow_operateBox = true;
    },
    deleteSonglist(key) {
      this.removeSonglist_key = key;
      this.showConfirm = true;
    },
    removeSonglist(result) {
      if (!result.execute) return;
      this.delSonglist({ key: result.data, isUpCache: true });
    },
    isRemove(key) {
      const templateArr = ["recently", "collect"];
      return templateArr.lastIndexOf(key) === -1;
    },
    skipSonglist(id) {
      this.$router.replace({
        name: "nowPlaying",
        params: { id }
      });
    },
    ShowPlayIco(listType) {
      if (!this.player.play) return false;
      return listType === this.player.playSong.listType;
    }
  },
  components: { SyncSonglist, Alert }
};
</script>

<style lang="less">
#Playlist {
  cursor: default;

  .list-enter-active,
  .list-leave-active {
    transition: all 0.5s;
  }
  .list-enter, .list-leave-to
/* .list-leave-active for below version 2.1.8 */ {
    opacity: 0;
  }

  .list-scroll {
    height: 100%;
    overflow-y: scroll;
    padding: 10px 5px;
    .box {
      // 栅格系统
      padding: 10px 0;
      text-align: center;
      .box-wrap {
        display: inline-block;
        position: relative;
        width: 140px;
        height: 140px;
        margin-bottom: 5px;
        cursor: pointer;

        // -------------------------------------
        @keyframes identifier_delete {
          0% {
            padding: 6px;
          }
          50% {
            padding: 2px;
          }
          100% {
            padding: 6px;
          }
        }
        span.btn-delete {
          position: absolute;
          top: -10px;
          right: -10px;
          width: 20px;
          height: 20px;
          border-radius: 50%;
          padding: 2px;
          background: #fff;
          // animation: identifier_delete 1.3s infinite;
        }
        span.btn-delete::after {
          content: "";
          display: block;
          width: 100%;
          height: 100%;
          border-radius: 50%;
          background-color: #777777;
          transition: background-color 0.5s ease-in-out;
        }
        span.btn-delete:hover::after {
          background-color: #f02930;
        }
        // -------------------------------------

        .box-img {
          overflow: hidden;
          border-radius: 10px;
          width: 100%;
          height: 100%;
          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
      }

      .box-wrap.active::before {
        content: "";
        width: 15px;
        height: 15px;
        position: absolute;
        bottom: 10px;
        left: 10px;
        background: url("./../assets/images/wave.gif") no-repeat;
        background-size: 100%;
      }

      p {
        margin: 0;
        padding: 0;
        /* 文字溢出禁止换行 */
        white-space: nowrap;
        /* 超出部分隐藏 */
        overflow: hidden;
        /* 文字溢出部分点点... */
        text-overflow: ellipsis;

        span {
          cursor: pointer;
        }
        span:hover {
          color: #31c27c;
        }
      }
    }

    @media (max-width: 770px) {
      .box {
        font-size: 10px;
        .box-wrap {
          width: 80px;
          height: 80px;
          border-radius: 5px;
        }
        .box-wrap.active::before {
          width: 10px;
          height: 10px;
        }
      }
    }

    .btn-addList {
      padding: 10px 0;
      ul {
        margin: 0;
      }
      ul > li {
        text-align: center;
        line-height: 40px;
        // border-top: 1px solid rgba(150, 150, 150, 0.1);
        border-bottom: 1px solid rgba(150, 150, 150, 0.1);
        background-color: rgba(0, 0, 0, 0.1);
        span {
          cursor: pointer;
        }
        span:hover {
          color: #31c27c;
        }
      }
    }
  }
}
</style>